<!DOCTYPE html>
<html>
	<head> 
		 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<link rel="stylesheet" href="js/themes/default/easyui.css"/>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>	
	</head>
	<style>
	
		body{
			font-size:12px;
		}
		table,
		th,
		td {
			border: 1px solid #ccc;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		table td:nth-child(odd) {
			background-color: #f1f1f1;
			width:160px;
		}
		table td:nth-child(even) {
			width:160px;
		}
		table tr:nth-child(even) {
			background-color:#ffffff;
		}
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
		img{
			margin:10px 2px 0;
			width:150px;
			/*height:150px;*/
			border-radius:5px;
			box-shadow:2px 3px 5px;
			transition:.5s all;			
		}
		img:nth-child(1){
			margin-left:200px;
		}
		img:hover{
			transform:scale(6);
		}
		
	</style>
	<body>	
	<!--图片审核-->
		<div class="">
			<div id="sho"></div>
		<div style="padding:15px 5px 0px 5px;border:1px solid #ccc;margin-bottom:15px;width:60%;margin:0 auto;">
		
			<table class="table table-hover">				
				<tbody>
						<th colspan="8">病例上传:</th>
					</tr>
					
					<tr>
						<td>主治医师:</td>
						<td colspan="8">
							<input id="p11" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>病人:</td>
						<td colspan="8">
							<input id="p22" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>联系方式:</td>
						<td colspan="8">
							<input id="p33" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>性别:</td>
						<td colspan="8">
							<input id="p44" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>年龄:</td>
						<td colspan="8">
							<input id="p55" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>住址:</td>
						<td colspan="8">
							<input id="p56" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>病因:</td>
						<td colspan="8">
							<input id="p66" name="title" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					<tr>
						<td>叮嘱:</td>
						<td colspan="8">							
							<textarea id="p77" name="content" cols="60" rows="10"></textarea>
						</td>								
					</tr>
					<tr style="display:none;">
						<td>图片id:</td>
						<td colspan="8">
							<input id="p88" name="id" value="0" class="form-control" type="text" style="width:280px"/>
						</td>								
					</tr>
					 <form method="post" id="formid" enctype="multipart/form-data"  target="iframe_display" >
						<td>病历上传:</td>
						<td colspan="8">
							<div>
						<input type="file" id="file" />
						<img src="" id="portrait" style="width:100px; height:100px; display: block;" />
						<input type="text"  id="base64Textarea"style="display:none"/>
						<!--<text id="base64Textarea" cols="30" rows="10" placeholder="base64信息输出" ></text>-->
						</div>
							<!--<input id="p6" name="image" class="form-control" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" style="width:280px;margin-bottom:5px"/>
							<input class="btn btn-danger" type="submit"  id="btn2" value="病历上传" style="width:280px;display:none"/> -->
						</td>
					</form> 
						<iframe id="iframe_display" name="iframe_display" style="display: none"></iframe>							
					</tr>	
					<tr>
						<td colspan="8">
							<input class="btn btn-danger" type="button"  id="btn" value="文库上传"/>
						</td>								
					</tr>
					<tr>
						<td colspan="8" style="color:red">
							PS:注意：请务必上传4张图片，否则会图片上传失败；另外请选择合适分辨率的图片上传，以免影响移动端显示效果
						</td>								
					</tr>
				</tbody>
			</table>
			
		</div>
	</body>
	<script>
		$(function(){
			var token = sessionStorage.getItem(key = 1);
			var url = "http://127.0.0.1:8088/medicalrecords";
			var url2 = "http://47.102.215.115/v1.0/user/app/imagetext/add/image/"+token; 
			console.log(url)
			$('form').attr('action',url2);
			  $("#formid").ajaxForm(function(data){ 
			  	console.log(data)
			        // alert(data.resp_message)
			    });       
			$('#btn').click(function(){
				var p1 = $('#p11').val();
				var p2 = $('#p22').val();
				var p3 = $('#p33').val();
				var p4 = $('#p44').val();
				var p5 = $('#p55').val();
				var p6 = $('#p66').val();
				var p7 = $('#p77').val();
				var p8 = $('#p88').val();
				var p9 = $('#p56').val();
				var p10 = $('#base64Textarea').val();
				var data = {
					reportthephysician:p1,
					name:p2,
					phone:p3,
					sex:p4,
					age:p5,
					pathologicaltype:p6,
					conclusion:p7,
					cordbase64:p10,
					address:p9,
					};
				$.ajax({										
					type:'POST',
					async: true,
					dataType: "json",
					url:url,					
					data:data,									
					success:function(data){	
						console.log(data)
						if(data.resp_code == "000000"){
							$('#formid').submit();
							alert("成功");
							// location.reload();
							window.location.href="medicalrecords.html"
						}else{
							alert(data.resp_message)
						}						
					},
					error:function(data){
						console.log('上传失败，请重试！')
					}
				})
			})
			
		})
		
	</script>
	
<script>
function ImgToBase64(file, maxLen, callBack) {
      var img = new Image();
  
     var reader = new FileReader();//读取客户端上的文件
     reader.onload = function () {
          var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
          img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
      };
      img.onload = function () {
         //生成比例
         var width = img.width, height = img.height;
         //计算缩放比例
         var rate = 1;
         if (width >= height) {
             if (width > maxLen) {
                 rate = maxLen / width;
             }
         } else {
             if (height > maxLen) {
                 rate = maxLen / height;
             }
         };
         img.width = width * rate;
        img.height = height * rate;
         //生成canvas
         var canvas = document.createElement("canvas");
         var ctx = canvas.getContext("2d");
         canvas.width = img.width;
         canvas.height = img.height;
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var base64 = canvas.toDataURL('image/jpeg', 0.9);
         callBack(base64);
     };
     reader.readAsDataURL(file);
 }


 $(function () {
          $("#file").change(function () {
              var file = $(this)[0].files[0];//获取input file控件选择的文件
              
              ImgToBase64(file, 720, function (base64) {
              	 document.getElementById('portrait').src = base64;
              document.getElementById('base64Textarea').value = base64;
              });
          })
     })
</script>
	
</html>




